<template>
  <h1>index...页面</h1>
  <!-- 转化为a链接跳转 -->
  <h2>静态参数</h2>
  <router-link to="/goods">商品列表</router-link><br/>
  <router-link to="/rest/user1/100">rest请求:/user1/100</router-link><br/>
  <router-link to="/rest/user2/100/张三/123456">rest请求:/rest/user2/100/张三/123456</router-link><br/>
  <router-link to="/query/goods1?id=100&userName=张三&password=123456">query 请求:/query/goods1?id=100&userName=张三&password=123456</router-link><br/>
  <h2>动态参数</h2>
  <!-- 这里用的是路由中的名称 -->
  <router-link :to="{ name: 'goods' }">商品列表</router-link><br/>
  <!-- 这里用的是路由中的地址 -->
  <router-link :to="{ path: '/goods' }">商品列表</router-link><br/>

  <!-- 问号形式 -->
  <router-link :to="{ path: '/query/goods1', query: { id: 100,username:'张三',password:'123456'  } }">query 请求:/query/goods1?id=100&userName=张三&password=123456</router-link><br/>

  <!-- 这里用的是路由中的名称 rest形式 -->
  <router-link :to="{ name: 'user1', params: { id: 100 } }">rest请求:/user1/100</router-link><br/>
  <!-- 用法同上 只不过参数增多 rest形式 -->
  <router-link :to="{ name: 'user2', params: { id: 100,username:'张三',password:'123456' } }">rest请求:/rest/user2/100/张三/123456</router-link><br/>

  <h3>通过router-link :to的形式 动态变量</h3>
  <router-link :to="{ name: 'user2', params: { id: myId,username:userName,password:password } }">rest请求 通过name:/rest/user2/100/李四/123456</router-link><br/>
  <router-link :to="{ path: '/query/goods1', query: { id: myId,username:userName,password:password  } }">query 请求:/query/goods1?id=100&userName=张三&password=123456</router-link><br/>

  <h1>a链接传参:不推荐</h1>
  <a href="/query/goods1?id=100&userName=张三&password=123456">query 请求:/query/goods1?id=100&userName=张三&password=123456</a><br/>

  <h3>编程形式</h3>
  <button @click="m1()">无参数</button><br/><br/>
  <button @click="m2()">path无参数</button><br/><br/>
  <button @click="m3()">rest有参数:/rest/user2/100/张三/123456</button><br/><br/>
  <button @click="m4()">问号形式有参数:/query/goods1?id=100&username=张三&password=123456</button><br/><br/>


</template>

<script setup>

import { useRouter } from "vue-router";
import {ref} from "vue";
//初始化路由
const router = useRouter();

const myId = $ref(100)
const userName = $ref('张三')
const password = $ref('123456')

const myUserName = ref('张三')
const myPassword = ref('123456')

function m1(){
  router.push('/goods')
}

function m2(){
  router.push({ path: '/goods' })
}

function m3(){
  // 命名的路由,并加上参数,让路由建立
  router.push({ name: 'user2', params: { id: myId,username:myUserName.value,password:myPassword.value } })
}

function m4(){
  // 带查询参数，结果是
  router.push({ path: '/query/goods1', query: { id: myId,username:myUserName.value,password:myPassword.value } })
}

</script>

<style scoped>

</style>